<template>
<div>

  <el-dialog
    title="商家详情"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-descriptions :column="1" labelClassName="labelClassName">
      <el-descriptions-item label="商家名称">{{
        info.title
      }}</el-descriptions-item>
      <el-descriptions-item label="商家详细地址">{{
        info.store_address
      }}</el-descriptions-item>
      <el-descriptions-item label="经度">{{
        info.longitude
      }}</el-descriptions-item>
      <el-descriptions-item label="纬度">
        {{ info.latitude }}
      </el-descriptions-item>
      <el-descriptions-item label="营业时间">{{
        info.business_hours
      }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{
        info.store_phone
      }}</el-descriptions-item>
      <el-descriptions-item label="商家公告">{{
        info.announcement
      }}</el-descriptions-item>
      <el-descriptions-item label="配送信息">{{
        info.delivery_info
      }}</el-descriptions-item>
      <el-descriptions-item label="商家图片">
        <div v-for="(url, idx) in info.store_imgs" :key="url">
          <el-image
            style="width: 130px; height: 130px; margin: 0 5px"
            :src="url"
            fit="cover"
            :preview-src-list="info.store_imgs"
            :initial-index="idx"
          ></el-image>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {},
    };
  },
  methods: {
    open(row) {
      this.info = { ...row };
      let arr_imgs = this.info.store_imgs.split(",");
      this.info.store_imgs = arr_imgs.map((item) => {
        return this.$baseUrl + item;
      });
      console.log("this.info: ", this.info);
      this.dialogVisible = true;
    },
    handleClose() {
      this.info = {};
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.el-descriptions {
  // padding: 5px 20px;
  font-size: 15px;
  font-weight: 600 !important;
  color: #303133 !important;
}

.labelClassName {
  font-weight: 600 !important;
  width: 100px !important;
  color: red !important;
}
</style>
